<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ShoppingCart, Star, Share, ZoomIn, ChatDotRound, Location, Shop, Medal, Check, ArrowRight } from '@element-plus/icons-vue'
import { productAPI } from '@/http'
import { useRoute } from 'vue-router'

// 商品数据
const product = ref({
  id: 1024,
  productName: "黑鲨5 Pro",
  productBrand: "Black Shark",
  productType: "手机",
  productPrice: 4199.0,
  productColor: "陨石黑",
  productSize: "6.67英寸",
  productMainImg: "http://sulvs3wm7.hd-bkt.clouddn.com/phone/huawei2.jpg",
  productCount: 45,
  productPoint: 8.7,
  productArea: "中国",
  productSold: 37,
  xx: null,
  yy: null,
  productVersion: 1,
  productStatus: 1
})

const route = useRoute();
const productId = Number(route.params.id);

const fetcheProduct = async () => {
  const res = await productAPI.getProductById(productId)
  console.log(res)
  product.value = res
}

onMounted(() => {
    fetcheProduct()
})

// 模拟数据
const skuList = ref([
  { id: 1, name: "黑鲨5 Pro 8GB+128GB", price: 3899, stock: 15 },
  { id: 2, name: "黑鲨5 Pro 12GB+256GB", price: 4199, stock: 20 },
  { id: 3, name: "黑鲨5 Pro 16GB+512GB", price: 4699, stock: 10 }
])

const selectedSku = ref(skuList.value[1])
const quantity = ref(1)
const isFavorite = ref(false)
const currentImage = ref(product.value.productMainImg)
const showSkuDialog = ref(false)
const showPreviewDialog = ref(false)

const imageList = ref([
  product.value.productMainImg,
  "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
  "https://img10.360buyimg.com/imgzone/jfs/t1/221557/39/13596/131247/624e8a5aE3b1c1c1c/0e8c5d5d5d5d5d5d.jpg",
  "https://img10.360buyimg.com/imgzone/jfs/t1/221557/39/13596/131247/624e8a5aE3b1c1c1c/0e8c5d5d5d5d5d5d.jpg"
])

const specifications = ref([
  { name: "品牌", value: product.value.productBrand },
  { name: "型号", value: product.value.productName },
  { name: "颜色", value: product.value.productColor },
  { name: "尺寸", value: product.value.productSize },
  { name: "产地", value: product.value.productArea },
  { name: "库存", value: `${product.value.productCount}件` },
  { name: "销量", value: `${product.value.productSold}件` }
])

const features = ref([
  "骁龙8 Gen1处理器",
  "144Hz AMOLED电竞屏",
  "120W超级快充",
  "磁动力升降肩键",
  "三明治液冷散热系统",
  "对称式立体声扬声器"
])

const comments = ref([
  {
    id: 1,
    user: "游戏玩家",
    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
    rating: 5,
    date: "2023-05-15",
    content: "游戏性能非常强悍，散热效果很好，长时间玩游戏也不会发热严重。",
    images: [
      "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
      "https://img10.360buyimg.com/imgzone/jfs/t1/221557/39/13596/131247/624e8a5aE3b1c1c1c/0e8c5d5d5d5d5d5d.jpg"
    ]
  },
  {
    id: 2,
    user: "数码爱好者",
    avatar: "https://randomuser.me/api/portraits/women/2.jpg",
    rating: 4,
    date: "2023-05-10",
    content: "外观设计很酷炫，屏幕显示效果很棒，就是有点重。"
  }
])

const ratingStats = ref({
  total: 28,
  average: 4.7,
  details: [
    { rating: 5, count: 20, percent: 71 },
    { rating: 4, count: 6, percent: 21 },
    { rating: 3, count: 1, percent: 4 },
    { rating: 2, count: 1, percent: 4 },
    { rating: 1, count: 0, percent: 0 }
  ]
})

const shopInfo = ref({
  name: "黑鲨官方旗舰店",
  logo: "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
  rating: 4.9,
  followers: "12.5万",
  products: "256",
  since: "2018",
  description: "黑鲨官方旗舰店，专注游戏手机研发，为玩家提供极致游戏体验。",
  guarantee: [
    "正品保证",
    "七天无理由退货",
    "15天质量问题换货",
    "一年质保"
  ]
})

const relatedProducts = ref([
  {
    id: 1025,
    name: "黑鲨5",
    price: 3199,
    image: "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
    rating: 4.5
  },
  {
    id: 1026,
    name: "黑鲨5 RS",
    price: 4599,
    image: "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
    rating: 4.8
  },
  {
    id: 1027,
    name: "黑鲨散热背夹",
    price: 199,
    image: "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
    rating: 4.2
  },
  {
    id: 1028,
    name: "黑鲨游戏手柄",
    price: 299,
    image: "https://img10.360buyimg.com/imgzone/jfs/t1/213540/25/15744/125892/624e8a5aE7c44b7a1/2c1b3c0a5c7c6a5f.jpg",
    rating: 4.6
  }
])

const activeTab = ref('detail')
const deliveryOptions = ref([
  { id: 1, name: "快递配送", price: 0, time: "1-3天", selected: true },
  { id: 2, name: "门店自提", price: 0, time: "当天", selected: false }
])

const selectedDelivery = computed(() => deliveryOptions.value.find(item => item.selected))

// 计算方法
const totalPrice = computed(() => {
  return (selectedSku.value.price * quantity.value).toFixed(2)
})

const discountPrice = computed(() => {
  return (selectedSku.value.price * 0.95).toFixed(2)
})

// 方法
const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value
}

const changeImage = (img: string) => {
  currentImage.value = img
}

import { cartAPI } from '@/http'
const addToCart = () => {
  console.log('加入购物车', {
    productId: product.value.id,
    skuId: selectedSku.value.id,
    quantity: quantity.value
  })

  const pro = {
    productId: product.value.id,
    productNum: quantity.value,
  }

  console.log(pro)
  cartAPI.addGoodsToCart(pro)
  
  alert('已加入购物车')

  showSkuDialog.value = false
}

import { useRouter } from 'vue-router'
const router = useRouter()

const buyNow = (product: any) => {
  router.push({
    name: 'purchasedialog',
    query: {
      product: JSON.stringify(product)
    }
  })
}

// 沙箱支付宝支付
// import { alipayAPI } from '@/http'

// const buyNow = async () => {
//   try {
//     // 直接使用你提供的参数
//     const paymentData = {
//       subject: product.value.productName,  // 商品名称
//       traceNo: `ORDER_${Date.now()}`, // 简单生成订单号
//       totalAmount: product.value.productPrice // 订单金额
//     };

//     // 调用支付宝接口
//     const response = await alipayAPI.getAliPay(paymentData);
    
//     // 处理支付页面
//     const payWindow = window.open('', '_blank');
//     if (payWindow) {
//       payWindow.document.write(response);
//     } else {
//       // 如果弹窗被拦截，直接在当前页面显示
//       document.body.innerHTML = response;
//     }
    
//   } catch (error) {
//     console.error('支付失败:', error);
//     alert('支付失败，请重试');
//   }
// };

// 生成订单编号的函数
// function generateOrderNumber(): string {
//   const timestamp = Date.now()
//   const randomNum = Math.floor(Math.random() * 10000)
//     .toString()
//     .padStart(4, '0')
//   return `ORDER_${timestamp}_${randomNum}`
// }

const openSkuDialog = () => {
  showSkuDialog.value = true
}

const openPreview = () => {
  showPreviewDialog.value = true
}
</script>

<template>
  <div class="product-detail-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <span>首页</span>
      <el-icon><ArrowRight /></el-icon>
      <span>手机</span>
      <el-icon><ArrowRight /></el-icon>
      <span>游戏手机</span>
      <el-icon><ArrowRight /></el-icon>
      <span class="current">{{ product.productName }}</span>
    </div>

    <!-- 商品主区域 -->
    <div class="product-main">
      <!-- 商品图片 -->
      <div class="product-gallery">
        <div class="thumbnail-list">
          <div 
            v-for="(img, index) in imageList" 
            :key="index"
            class="thumbnail-item"
            :class="{ active: currentImage === img }"
            @click="changeImage(img)"
          >
            <img :src=product.productMainImg alt="商品主图">  
          </div>
        </div>
        <div class="main-image" @click="openPreview">
          <img :src=product.productMainImg :alt="product.productName">
          <div class="zoom-icon">
            <el-icon><ZoomIn /></el-icon>
          </div>
        </div>
      </div>

      <!-- 商品信息 -->
      <div class="product-info">
        <h1 class="product-title">{{ product.productName }}</h1>
        <div class="product-subtitle">品牌 : {{ product.productBrand }}</div>
        
        <div class="product-meta">
          <div class="rating">
            <el-rate v-model="product.productPoint" disabled show-score text-color="#ff9900" score-template="{value} 分" />
            <span class="review-count">28条评价</span>
            <span class="sold-count">已售{{ product.productSold }}件</span>
          </div>
          
          <div class="price-section">
            <div class="current-price">
              <span class="price-symbol">¥</span>
              <span class="price-value">{{ product.productPrice.toFixed(2) }}</span>
            </div>
            <div class="original-price">{{ (product.productPrice / 0.95) . toFixed(2) }}</div>
            <div class="discount-tag">限时9.5折</div>
          </div>
          
          <div class="promotion">
            <div class="promotion-title">促销</div>
            <div class="promotion-items">
              <div class="promotion-item">
                <span class="tag">满减</span>
                <span>满3000减200</span>
              </div>
              <div class="promotion-item">
                <span class="tag">赠品</span>
                <span>赠降噪耳机</span>
              </div>
              <div class="promotion-item">
                <span class="tag">分期</span>
                <span>3期免息</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 选择规格 -->
        <div class="sku-section">
          <div class="sku-row">
            <div class="sku-name">类型</div>
            <div class="sku-values">
              <div class="sku-value selected">{{ product.productType }}</div>
            </div>
          </div>
          
          <div class="sku-row">
            <div class="sku-name">颜色</div>
            <div class="sku-values">
              <div class="sku-value selected">陨石黑</div>
              <div class="sku-value">冰霜白</div>
            </div>
          </div>
          
          <div class="sku-row">
            <div class="sku-name">数量</div>
            <div class="quantity-selector">
              <button class="minus" @click="quantity > 1 ? quantity-- : null">-</button>
              <input type="number" v-model.number="quantity" min="1" :max="selectedSku.stock">
              <button class="plus" @click="quantity < selectedSku.stock ? quantity++ : null">+</button>
              <span class="stock-info">库存{{ selectedSku.stock }}件</span>
            </div>
          </div>
          
          <div class="sku-row">
            <div class="sku-name">配送</div>
            <div class="delivery-options">
              <div 
                v-for="option in deliveryOptions"
                :key="option.id"
                class="delivery-option"
                :class="{ selected: option.selected }"
                @click="deliveryOptions.forEach(o => o.selected = false); option.selected = true"
              >
                <div class="delivery-name">{{ option.name }}</div>
                <div class="delivery-details">
                  <span class="delivery-price" v-if="option.price > 0">¥{{ option.price }}</span>
                  <span class="delivery-price" v-else>免运费</span>
                  <span class="delivery-time">{{ option.time }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 操作按钮 -->
        <div class="action-buttons">
          <button class="add-to-cart" @click="addToCart">
            <el-icon><ShoppingCart /></el-icon>
            加入购物车
          </button>
          <button class="buy-now" @click="buyNow(product)">立即购买</button>
          <button class="favorite" @click="toggleFavorite" :class="{ active: isFavorite }">
            <el-icon><Heart /></el-icon>
            {{ isFavorite ? '已收藏' : '收藏' }}
          </button>
        </div>

        <!-- 服务承诺 -->
        <div class="service-promise">
          <div class="service-item">
            <el-icon><Check /></el-icon>
            <span>正品保证</span>
          </div>
          <div class="service-item">
            <el-icon><Check /></el-icon>
            <span>七天无理由退货</span>
          </div>
          <div class="service-item">
            <el-icon><Check /></el-icon>
            <span>15天质量问题换货</span>
          </div>
          <div class="service-item">
            <el-icon><Check /></el-icon>
            <span>一年质保</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 商品详情 -->
    <div class="product-content">
      <div class="content-tabs">
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'detail' }"
          @click="activeTab = 'detail'"
        >
          商品详情
        </div>
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'spec' }"
          @click="activeTab = 'spec'"
        >
          规格参数
        </div>
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'comment' }"
          @click="activeTab = 'comment'"
        >
          商品评价(28)
        </div>
        <div 
          class="tab-item"
          :class="{ active: activeTab === 'aftersale' }"
          @click="activeTab = 'aftersale'"
        >
          售后保障
        </div>
      </div>

      <!-- 商品详情内容 -->
      <div class="tab-content" v-show="activeTab === 'detail'">
        <div class="detail-section">
          <h3>产品介绍</h3>
          <p>黑鲨5 Pro是黑鲨科技推出的专业电竞手机，搭载骁龙8 Gen1处理器，配备144Hz AMOLED电竞屏，120W超级快充，磁动力升降肩键，三明治液冷散热系统，为玩家提供极致游戏体验。</p>
        </div>
        
        <div class="detail-section">
          <h3>产品特色</h3>
          <ul>
            <li v-for="(feature, index) in features" :key="index">{{ feature }}</li>
          </ul>
        </div>
        
        <div class="detail-section">
          <h3>产品图片</h3>
          <img 
            v-for="(img, index) in imageList" 
            :key="index"
            :src=product.productMainImg
            :alt="`${product.productName}-detail-${index}`"
            class="detail-image"
          >
        </div>
      </div>

      <!-- 规格参数 -->
      <div class="tab-content" v-show="activeTab === 'spec'">
        <table class="spec-table">
          <tr v-for="(spec, index) in specifications" :key="index">
            <th>{{ spec.name }}</th>
            <td>{{ spec.value }}</td>
          </tr>
        </table>
      </div>

      <!-- 商品评价 -->
      <div class="tab-content" v-show="activeTab === 'comment'">
        <div class="comment-overview">
          <div class="overview-left">
            <div class="rating-score">
              <span class="score">{{ ratingStats.average.toFixed(1) }}</span>
              <span class="total">/5.0</span>
            </div>
            <div class="rating-stars">
              <el-rate v-model="ratingStats.average" disabled />
            </div>
            <div class="rating-count">{{ ratingStats.total }}人评价</div>
          </div>
          <div class="overview-right">
            <div class="rating-bar" v-for="item in ratingStats.details" :key="item.rating">
              <span class="rating-label">{{ item.rating }}星</span>
              <div class="bar-container">
                <div class="bar" :style="{ width: `${item.percent}%` }"></div>
              </div>
              <span class="rating-percent">{{ item.percent }}%</span>
            </div>
          </div>
        </div>
        
        <div class="comment-list">
          <div class="comment-item" v-for="comment in comments" :key="comment.id">
            <div class="user-info">
              <img :src="comment.avatar" :alt="comment.user" class="user-avatar">
              <span class="user-name">{{ comment.user }}</span>
            </div>
            <div class="comment-rating">
              <el-rate v-model="comment.rating" disabled />
              <span class="comment-date">{{ comment.date }}</span>
            </div>
            <div class="comment-content">
              {{ comment.content }}
            </div>
            <div class="comment-images" v-if="comment.images && comment.images.length > 0">
              <img 
                v-for="(img, index) in comment.images" 
                :key="index"
                :src="img"
                :alt="`${comment.user}-comment-${index}`"
                class="comment-image"
              >
            </div>
          </div>
        </div>
      </div>

      <!-- 售后保障 -->
      <div class="tab-content" v-show="activeTab === 'aftersale'">
        <div class="aftersale-section">
          <h3>售后保障</h3>
          <p>黑鲨官方提供完善的售后保障服务，包括七天无理由退货、15天质量问题换货、一年质保等服务。</p>
        </div>
        
        <div class="aftersale-section">
          <h3>退换货政策</h3>
          <ul>
            <li>自收到商品之日起7天内可申请无理由退货</li>
            <li>商品存在质量问题15天内可申请换货</li>
            <li>退货时请保持商品完好，配件齐全</li>
            <li>退货产生的运费由买家承担</li>
          </ul>
        </div>
        
        <div class="aftersale-section">
          <h3>维修服务</h3>
          <ul>
            <li>商品自购买之日起一年内享受免费维修服务</li>
            <li>人为损坏不在保修范围内</li>
            <li>维修期间提供备用机服务</li>
          </ul>
        </div>
      </div>
    </div>

    <!-- 店铺信息 -->
    <div class="shop-info">
      <div class="shop-header">
        <img :src="shopInfo.logo" :alt="shopInfo.name" class="shop-logo">
        <div class="shop-name">{{ shopInfo.name }}</div>
        <button class="enter-shop">进入店铺</button>
      </div>
      
      <div class="shop-rating">
        <div class="rating-item">
          <span class="rating-value">{{ shopInfo.rating }}</span>
          <span class="rating-label">店铺评分</span>
        </div>
        <div class="rating-item">
          <span class="rating-value">{{ shopInfo.followers }}</span>
          <span class="rating-label">关注人数</span>
        </div>
        <div class="rating-item">
          <span class="rating-value">{{ shopInfo.products }}</span>
          <span class="rating-label">商品数量</span>
        </div>
      </div>
      
      <div class="shop-description">
        {{ shopInfo.description }}
      </div>
      
      <div class="shop-guarantee">
        <div class="guarantee-title">店铺保障</div>
        <div class="guarantee-items">
          <div class="guarantee-item" v-for="(item, index) in shopInfo.guarantee" :key="index">
            <el-icon><Check /></el-icon>
            <span>{{ item }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 推荐商品 -->
    <div class="recommend-products">
      <div class="section-title">猜你喜欢</div>
      <div class="product-list">
        <div class="product-card" v-for="item in relatedProducts" :key="item.id">
          <img :src="item.image" :alt="item.name" class="product-image">
          <div class="product-name">{{ item.name }}</div>
          <div class="product-price">¥{{ item.price.toFixed(2) }}</div>
          <div class="product-rating">
            <el-rate v-model="item.rating" disabled />
          </div>
        </div>
      </div>
    </div>

    <!-- SKU选择对话框 -->
    <div class="sku-dialog" v-if="showSkuDialog">
      <div class="dialog-mask"></div>
      <div class="dialog-content">
        <div class="dialog-header">
          <div class="product-image">
            <img :src="product.productMainImg" :alt="product.productName">
          </div>
          <div class="product-info">
            <div class="product-name">{{ product.productName }}</div>
            <div class="product-price">¥{{ selectedSku.price.toFixed(2) }}</div>
            <div class="product-selected">已选: {{ selectedSku.name }}</div>
          </div>
          <button class="close-btn" @click="showSkuDialog = false">×</button>
        </div>
        
        <div class="dialog-body">
          <div class="sku-section">
            <div class="sku-title">版本</div>
            <div class="sku-options">
              <div 
                v-for="sku in skuList" 
                :key="sku.id"
                class="sku-option"
                :class="{ selected: selectedSku.id === sku.id, disabled: sku.stock <= 0 }"
                @click="selectedSku = sku"
              >
                {{ sku.name }}
                <span v-if="sku.stock <= 0" class="stock-tip">无货</span>
              </div>
            </div>
          </div>
          
          <div class="quantity-section">
            <div class="quantity-title">数量</div>
            <div class="quantity-selector">
              <button class="minus" @click="quantity > 1 ? quantity-- : null">-</button>
              <input type="number" v-model.number="quantity" min="1" :max="selectedSku.stock">
              <button class="plus" @click="quantity < selectedSku.stock ? quantity++ : null">+</button>
              <span class="stock-info">库存{{ selectedSku.stock }}件</span>
            </div>
          </div>
        </div>
        
        <div class="dialog-footer">
          <button class="add-to-cart" @click="addToCart">加入购物车</button>
          <button class="buy-now" @click="buyNow">立即购买</button>
        </div>
      </div>
    </div>

    <!-- 图片预览对话框 -->
    <div class="preview-dialog" v-if="showPreviewDialog">
      <div class="dialog-mask" @click="showPreviewDialog = false"></div>
      <div class="preview-content">
        <img :src="currentImage" :alt="product.productName">
        <button class="close-btn" @click="showPreviewDialog = false">×</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.product-detail-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #333;
}

.breadcrumb {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.breadcrumb .current {
  color: #ff6700;
}

.breadcrumb .el-icon {
  margin: 0 8px;
  font-size: 12px;
}

.product-main {
  display: flex;
  margin-bottom: 40px;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.product-gallery {
  width: 450px;
  display: flex;
  margin-right: 40px;
}

.thumbnail-list {
  width: 80px;
  margin-right: 10px;
}

.thumbnail-item {
  width: 80px;
  height: 80px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  cursor: pointer;
  overflow: hidden;
  position: relative;
}

.thumbnail-item.active {
  border-color: #ff6700;
}

.thumbnail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-image {
  width: 360px;
  height: 360px;
  border: 1px solid #eee;
  position: relative;
  cursor: zoom-in;
  overflow: hidden;
}

.main-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.zoom-icon {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-info {
  flex: 1;
}

.product-title {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 8px;
}

.product-subtitle {
  font-size: 16px;
  color: #999;
  margin-bottom: 20px;
}

.product-meta {
  margin-bottom: 25px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.rating {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.review-count, .sold-count {
  font-size: 14px;
  color: #999;
  margin-left: 15px;
}

.price-section {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}

.current-price {
  color: #ff6700;
  margin-right: 15px;
}

.price-symbol {
  font-size: 20px;
}

.price-value {
  font-size: 28px;
  font-weight: 700;
}

.original-price {
  font-size: 16px;
  color: #999;
  text-decoration: line-through;
  margin-right: 15px;
}

.discount-tag {
  background: #ff6700;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 14px;
}

.promotion {
  display: flex;
  margin-top: 15px;
}

.promotion-title {
  color: #999;
  margin-right: 15px;
}

.promotion-items {
  flex: 1;
}

.promotion-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.promotion-item .tag {
  display: inline-block;
  background: #f5f5f5;
  color: #ff6700;
  padding: 0 5px;
  margin-right: 10px;
  border-radius: 2px;
}

.sku-section {
  margin-bottom: 25px;
}

.sku-row {
  display: flex;
  margin-bottom: 20px;
}

.sku-name {
  width: 80px;
  color: #999;
  padding-top: 8px;
}

.sku-values {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.sku-value {
  min-width: 120px;
  padding: 8px 15px;
  margin-right: 10px;
  margin-bottom: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
}

.sku-value.selected {
  border-color: #ff6700;
  color: #ff6700;
}

.sku-value.disabled {
  color: #ccc;
  cursor: not-allowed;
  border-style: dashed;
}

.stock-tip {
  position: absolute;
  right: 0;
  top: 0;
  background: #999;
  color: #fff;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 0 4px 0 4px;
}

.quantity-selector {
  display: flex;
  align-items: center;
}

.quantity-selector button {
  width: 30px;
  height: 30px;
  background: #f5f5f5;
  border: none;
  font-size: 16px;
  cursor: pointer;
}

.quantity-selector input {
  width: 50px;
  height: 30px;
  text-align: center;
  border: 1px solid #eee;
  margin: 0 5px;
}

.stock-info {
  margin-left: 15px;
  color: #999;
  font-size: 14px;
}

.delivery-options {
  display: flex;
}

.delivery-option {
  padding: 10px 15px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-right: 10px;
  cursor: pointer;
}

.delivery-option.selected {
  border-color: #ff6700;
  color: #ff6700;
}

.delivery-name {
  font-size: 14px;
  margin-bottom: 5px;
}

.delivery-details {
  font-size: 12px;
  color: #999;
}

.delivery-price {
  margin-right: 5px;
}

.action-buttons {
  display: flex;
  margin-top: 30px;
}

.action-buttons button {
  height: 50px;
  font-size: 16px;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.add-to-cart {
  background: #ff9500;
  color: #fff;
  border: none;
  width: 180px;
  margin-right: 15px;
}

.add-to-cart .el-icon {
  margin-right: 8px;
}

.buy-now {
  background: #ff6700;
  color: #fff;
  border: none;
  width: 120px;
  margin-right: 15px;
}

.favorite {
  background: #fff;
  border: 1px solid #ddd;
  width: 120px;
}

.favorite.active {
  color: #ff6700;
  border-color: #ff6700;
}

.favorite .el-icon {
  margin-right: 8px;
}

.service-promise {
  display: flex;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.service-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
  font-size: 14px;
  color: #666;
}

.service-item .el-icon {
  color: #ff6700;
  margin-right: 5px;
}

.product-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
}

.content-tabs {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
  color: #666;
}

.tab-item.active {
  color: #ff6700;
  border-bottom: 2px solid #ff6700;
}

.tab-content {
  padding: 20px 0;
}

.detail-section {
  margin-bottom: 30px;
}

.detail-section h3 {
  font-size: 18px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.detail-section p, .detail-section li {
  line-height: 1.8;
  color: #666;
  margin-bottom: 10px;
}

.detail-image {
  width: 400px;
  margin: 10px 0;
  display: block;
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
}

.spec-table th, .spec-table td {
  padding: 12px 15px;
  border: 1px solid #eee;
  text-align: left;
}

.spec-table th {
  width: 150px;
  background: #f9f9f9;
  color: #666;
}

.comment-overview {
  display: flex;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  margin-bottom: 30px;
}

.overview-left {
  width: 200px;
  text-align: center;
  padding-right: 20px;
  border-right: 1px solid #eee;
}

.rating-score {
    margin-bottom: 10px;
}

.rating-score .score {
font-size: 36px;
font-weight: 700;
color: #ff6700;
}

.rating-score .total {
font-size: 16px;
color: #999;
}

.rating-stars {
margin-bottom: 10px;
}

.rating-count {
font-size: 14px;
color: #999;
}

.overview-right {
flex: 1;
padding-left: 20px;
}

.rating-bar {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.rating-label {
width: 50px;
font-size: 14px;
color: #666;
}

.bar-container {
flex: 1;
height: 10px;
background: #eee;
border-radius: 5px;
margin: 0 10px;
overflow: hidden;
}

.bar {
height: 100%;
background: #ff6700;
}

.rating-percent {
width: 40px;
font-size: 14px;
color: #666;
}

.comment-list {
border-top: 1px solid #eee;
}

.comment-item {
padding: 20px 0;
border-bottom: 1px solid #eee;
}

.user-info {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.user-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}

.user-name {
font-size: 14px;
color: #666;
}

.comment-rating {
display: flex;
align-items: center;
margin-bottom: 10px;
}

.comment-date {
font-size: 12px;
color: #999;
margin-left: 10px;
}

.comment-content {
line-height: 1.6;
margin-bottom: 15px;
}

.comment-images {
display: flex;
flex-wrap: wrap;
}

.comment-image {
width: 80px;
height: 80px;
margin-right: 10px;
margin-bottom: 10px;
object-fit: cover;
cursor: pointer;
}

.aftersale-section {
margin-bottom: 30px;
}

.aftersale-section h3 {
font-size: 18px;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.aftersale-section p, .aftersale-section li {
line-height: 1.8;
color: #666;
margin-bottom: 10px;
}

.shop-info {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
margin-bottom: 40px;
}

.shop-header {
display: flex;
align-items: center;
padding-bottom: 20px;
border-bottom: 1px solid #eee;
margin-bottom: 20px;
}

.shop-logo {
width: 60px;
height: 60px;
border-radius: 50%;
margin-right: 15px;
}

.shop-name {
flex: 1;
font-size: 18px;
font-weight: 700;
}

.enter-shop {
background: #fff;
border: 1px solid #ff6700;
color: #ff6700;
padding: 8px 15px;
border-radius: 4px;
cursor: pointer;
}

.shop-rating {
display: flex;
justify-content: space-around;
margin-bottom: 20px;
}

.rating-item {
text-align: center;
}

.rating-value {
display: block;
font-size: 20px;
font-weight: 700;
color: #ff6700;
margin-bottom: 5px;
}

.rating-label {
font-size: 14px;
color: #999;
}

.shop-description {
line-height: 1.6;
color: #666;
margin-bottom: 20px;
}

.shop-guarantee {
border-top: 1px solid #eee;
padding-top: 20px;
}

.guarantee-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 15px;
}

.guarantee-items {
display: flex;
flex-wrap: wrap;
}

.guarantee-item {
display: flex;
align-items: center;
margin-right: 20px;
margin-bottom: 10px;
font-size: 14px;
color: #666;
}

.guarantee-item .el-icon {
color: #ff6700;
margin-right: 5px;
}

.recommend-products {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
font-size: 18px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}

.product-list {
display: flex;
flex-wrap: wrap;
margin: 0 -10px;
}

.product-card {
width: calc(25% - 20px);
margin: 0 10px 20px;
cursor: pointer;
}

.product-image {
width: 100%;
height: 180px;
object-fit: cover;
margin-bottom: 10px;
}

.product-name {
font-size: 14px;
margin-bottom: 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.product-price {
color: #ff6700;
font-weight: 700;
margin-bottom: 8px;
}

.product-rating {
display: flex;
}

.sku-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
}

.dialog-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
}

.dialog-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-radius: 12px 12px 0 0;
padding: 20px;
max-height: 80vh;
overflow-y: auto;
animation: slide-up 0.3s;
}

@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
}

.dialog-header {
display: flex;
margin-bottom: 20px;
position: relative;
}

.dialog-header .product-image {
width: 100px;
height: 100px;
border: 1px solid #eee;
margin-right: 15px;
}

.dialog-header .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.dialog-header .product-info {
flex: 1;
}

.dialog-header .product-name {
font-size: 16px;
font-weight: 700;
margin-bottom: 5px;
}

.dialog-header .product-price {
color: #ff6700;
font-size: 18px;
font-weight: 700;
margin-bottom: 5px;
}

.dialog-header .product-selected {
font-size: 14px;
color: #666;
}

.close-btn {
position: absolute;
top: 0;
right: 0;
width: 30px;
height: 30px;
background: none;
border: none;
font-size: 20px;
color: #999;
cursor: pointer;
}

.sku-section {
margin-bottom: 20px;
}

.sku-title {
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
}

.sku-options {
display: flex;
flex-wrap: wrap;
}

.sku-option {
min-width: 100px;
padding: 8px 15px;
margin-right: 10px;
margin-bottom: 10px;
border: 1px solid #eee;
border-radius: 4px;
cursor: pointer;
position: relative;
}

.sku-option.selected {
border-color: #ff6700;
color: #ff6700;
}

.sku-option.disabled {
color: #ccc;
cursor: not-allowed;
border-style: dashed;
}

.quantity-section {
display: flex;
align-items: center;
margin-bottom: 20px;
}

.quantity-title {
width: 80px;
font-size: 16px;
font-weight: 700;
}

.dialog-footer {
display: flex;
margin-top: 30px;
}

.dialog-footer button {
flex: 1;
height: 50px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}

.dialog-footer .add-to-cart {
background: #ff9500;
color: #fff;
border: none;
margin-right: 15px;
}

.dialog-footer .buy-now {
background: #ff6700;
color: #fff;
border: none;
}

.preview-dialog {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

.preview-dialog .dialog-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
}

.preview-content {
position: relative;
max-width: 90%;
max-height: 90%;
}

.preview-content img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
}

.preview-content .close-btn {
position: absolute;
top: -40px;
right: 0;
width: 30px;
height: 30px;
background: none;
border: none;
font-size: 30px;
color: #fff;
cursor: pointer;
}

@media (max-width: 768px) {
.product-main {
flex-direction: column;
}

.product-gallery {
width: 100%;
margin-right: 0;
margin-bottom: 20px;
}

.thumbnail-list {
width: 60px;
}

.main-image {
width: calc(100% - 70px);
}

.product-card {
width: calc(50% - 20px);
}

.dialog-content {
padding: 15px;
}

.sku-option {
min-width: 80px;
padding: 6px 10px;
}
}
</style>